<template>
  <div>
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><a @click="$router.go(-1)">数据查询</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>井查询</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <div class="page-content">
      <div class="form-content">
        <br />
        <el-form label-width="150px" :model="dialogForm" ref="dialogForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="井名：">
                <el-input v-model="dialogForm.wellName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业公司:">
                <el-select
                  v-model="dialogForm.cementCompany"
                  placeholder="作业公司"
                  clearable
                  filterable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in workCompanyOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="国别：">
                <el-select
                  v-model="dialogForm.country"
                  placeholder="国别"
                  clearable
                  filterable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in countryOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区域:">
                <el-select
                  v-model="dialogForm.area"
                  placeholder="区域"
                  clearable
                  filterable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in areaOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="区块：">
                <el-input v-model="dialogForm.block"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="构造/油田:">
                <el-input v-model="dialogForm.oilField"></el-input>
                <!-- <el-input v-model="filterQuery.sex" placeholder="性别"></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="井型" prop="wellType">
                <el-select
                  placeholder="请选择井型"
                  style="width:100%;"
                  v-model="dialogForm.wellType"
                >
                  <el-option
                    v-for="item in wellTypeOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="井别" prop="wellSpacing">
                <el-select
                  placeholder="请选择井别"
                  style="width:100%;"
                  v-model="dialogForm.wellSpacing"
                >
                  <el-option
                    v-for="item in wellSpacingOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="handleUpdata">确定</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a @click="$router.go(-1)">
              <el-button type="info" native-type="button">取消</el-button>
            </a>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetCountryData,
  GetWorkCompany,
  GetArea,
  GetWellType,
  GetWellSpacing,
  GetWellDetail,
  updateWell
} from "@/api/module/well_management";
export default {
  data() {
    return {
      dialogForm: {
        wellName: "",
        country: "",
        oilField: "",
        block: "",
        cementCompany: "",
        area: "",
        ba_WELL_ID: "",
        wellType: "",
        wellSpacing: ""
      },
      editWellVisible: false,
      ID: "",
      wellData: [],
      wellName: "",
      wellSpacingOptions: [],
      wellTypeOptions: [],
      workCompanyOptions: [],
      countryOptions: [],
      areaOptions: []
    };
  },
  created() {
    this.getWellDetails();
    this.getWorkCompany();
    this.getCountry();
    this.getArea();
    this.getWellType();
    this.getWellSpacing();
    // this.createSucceedWell();
  },
  methods: {
    // 保存数据
    handleUpdata() {
      this.UpdateWell("dialogForm");
    },
    // 更新编辑
    UpdateWell(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateWell(JSON.stringify(this.dialogForm)).then(
            () => {
              this.$message.success("操作成功");
              this.$router.go(-1); //返回上一url
            },
            err => {
              this.$message.error(err.message);
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取数据
    getWellDetails() {
      this.$route.params.id &&
        localStorage.setItem("data", JSON.stringify(this.$route.params.id));
      const id = JSON.parse(localStorage.getItem("data"));
      GetWellDetail(id)
        .then(res => {
          console.log("res", res);
          this.ID = id;
          //  console.log('id',this.ID)
          this.dialogForm = res.data.data;
          console.log("f", this.form);
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    getWorkCompany() {
      let params = {
        label: "作业公司"
      };
      GetWorkCompany(params)
        .then(res => {
          this.workCompanyOptions = res.data.data;
        })
        .catch(e => {
          this.$message.error("未查询到作业单位数据！");
        });
    },
    getArea() {
      // let params = {
      //   label:'区域'
      // }
      GetArea()
        .then(res => {
          this.areaOptions = res.data.data;
          console.log("res", this.areaOptions);
        })
        .catch(e => {
          this.$message.error("未查询到作业单位数据！");
        });
    },
    // 获取井型
    getWellType() {
      GetWellType()
        .then(res => {
          this.wellTypeOptions = res.data.data;
          console.log("res", this.areaOptions);
        })
        .catch(e => {
          this.$message.error("未查询到作业单位数据！");
        });
    },
    // 获取井别
    getWellSpacing() {
      GetWellSpacing()
        .then(res => {
          this.wellSpacingOptions = res.data.data;
          console.log("res", this.areaOptions);
        })
        .catch(e => {
          this.$message.error("未查询到作业单位数据！");
        });
    },
    // 获取国家信息
    getCountry() {
      let params = {
        label: "国别"
      };
      GetCountryData(params)
        .then(res => {
          this.countryOptions = res.data.data;
        })
        .catch(e => {
          this.$message.error("未查询到国别数据！");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-content {
  max-width: 800px;
}
.page-content {
  padding-top: 40px;
}
</style>
